<template>
  <div class="echarts1" ref="echarts">
    <!--区域告警统计图-->
  </div>
</template>

<script>

import * as echarts from "echarts"

export default {
  name: 'echarts1',
  watch: {
    list: {
      handler() {
        this.drawLine()
      }
    }
  },
  mounted() {
    this.drawLine()
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      window.addEventListener('resize', this.drawLine)
      let myChart = echarts.init(this.$refs.echarts)
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 4.5, shape.y - 4.5]
          const c2 = [xAxisPoint[0] - 4.5, xAxisPoint[1] - 4.5]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 9, xAxisPoint[1] - 4.5]
          const c4 = [shape.x + 9, shape.y - 4.5]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 9, shape.y - 4.5]
          const c3 = [shape.x + 4.5, shape.y - 9]
          const c4 = [shape.x - 4.5, shape.y - 4.5]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790]
      var option = {
        grid: {
          left: 20,
          right: 20,
          bottom: '5%',
          top: 20,
          containLabel: true
        },



        xAxis: {
          type: 'category',
          data: this.list.map(obj => obj.name),
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 164, 255, 0.2)',
              fontSize: '12px'
            }
          },
          offset: 0,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            fontSize: 12,
            color: 'rgba(152, 191, 251, 1)'
          },
          splitLine: {
            show: false,
            lineStyle: {color: 'red'}
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 164, 255, 0.2)',
              fontSize: '12px'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 13,
            color: 'rgba(152, 191, 251, 1)'
          },
        },

        //提示框组件
        tooltip: {
          show: true,
          trigger: 'axis',

          axisPointer: {

            type: 'none',
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(61, 136, 226, 0.1)'
              }, {
                offset: 1,
                color: 'rgba(61, 136, 226, 0.5)'
              }], false),

            }

          }

        },

        series: [{
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                    {
                      offset: 1,
                      color: '#49BEE5'
                    }
                  ])
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                    {
                      offset: 1,
                      color: '#49BEE5'
                    }
                  ])
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3B80E2'
                  },
                    {
                      offset: 1,
                      color: '#49BEE5'
                    }
                  ])
                }
              }]
            }
          },
          data: this.list.map(obj => obj.value)
        },
        {
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: 'rgba(0, 164, 255, 1)',
              offset: [4, -5]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          data: this.list.map(obj => obj.value)
        }]
      }


      var len = 0;

      setInterval(() => {
        if (len === this.list.map(obj => obj.name).length) {
          len = 0
        }
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: len,
        })
        len++;
      }, 2000)

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
